<template>
  <div class="certification">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>实名信息</span>
        </div>
      </template>
      <div v-if="userInfo.authStatus===1" class="certified">
        <div class="tip">
          <p><el-icon><WarningFilled /></el-icon>完成实名认证后才能添加就诊人，正常进行挂号，为了不影响后续步骤，建议提前实名认证。</p>
        </div>
        <el-descriptions
            :column="1"
            border
            style="width: 80%;margin: 0 auto"
        >
          <el-descriptions-item label="用户姓名" align="left" label-align="center">{{ userInfo.name }}</el-descriptions-item>
          <el-descriptions-item label="证件类型" align="left" label-align="center">{{userInfo.certificatesType==='10'?'身份证':'户口本'}}</el-descriptions-item>
          <el-descriptions-item label="证件号码" align="left" label-align="center">{{userInfo.certificatesNo}}</el-descriptions-item>
        </el-descriptions>
      </div>
      <div v-if="userInfo.authStatus===0 || userInfo.authStatus===2" class="notCertified">
        <div class="tip">
          <p><el-icon><WarningFilled /></el-icon>完成实名认证后才能添加就诊人，正常进行挂号，为了不影响后续步骤，建议提前实名认证。</p>
        </div>
        <el-form style="width: 60%;margin: 20px auto"
                 ref="ruleFormRef"
                 :model="authParam"
                 :rules="rules"
        >
          <el-form-item  label="用户姓名" required prop="name">
            <el-input v-model="authParam.name" placeholder="请输入用户姓名"/>
          </el-form-item>
          <el-form-item label="证件类型" required prop="type">
            <el-select v-model="authParam.certificatesType" label="请选择证件类型" style="width: 100%">
              <el-option v-for="(item,index) in certationTypeArr" :label="item.name" :value="item.value"/>
            </el-select>
          </el-form-item>
          <el-form-item  label="证件号码" required prop="no">
            <el-input v-model="authParam.certificatesNo" placeholder="请输入证件号码"/>
          </el-form-item>
          <el-form-item label="上传证件" required prop="file">
            <el-upload ref="upload" :on-exceed="exceedHandler" :on-preview="handlePictureCardPreview" :on-success="successHandler" list-type="picture-card" :limit="1" action="/api/oss/file/fileUpload?fileHost=userAuah">
              <img src="../../assets/images/auth_example.png" alt="" style="width: 100%;height: 100%;">
            </el-upload>
            <el-dialog v-model="dialogVisible">
              <img w-full v-show="authParam.certificatesUrl" :src="authParam.certificatesUrl" alt="Preview Image" />
            </el-dialog>
          </el-form-item>
          <el-form-item style="margin-left: 80px">
            <el-button type="primary" @click="submit">提交</el-button>
            <el-button @click="resetForm(ruleFormRef)">重写</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>
<script setup lang="ts">
import {WarningFilled} from "@element-plus/icons-vue";
import {reqCertationType, reqUserAuah, reqUserInfo} from "@/api/user";
import {onMounted, reactive,ref} from "vue";
import {ElMessage} from "element-plus";

let userInfo = ref<any>({});
let certationTypeArr = ref([])
let authParam = reactive({
  certificatesNo:'',
  certificatesType:'',
  certificatesUrl:'',
  name:''
});
let dialogVisible = ref<boolean>(false); //控制预览图弹窗
let ruleFormRef = ref();
let upload = ref();

// 获取用户登录信息
const  getUserInfo = async () => {
  let result = await reqUserInfo();
  userInfo.value = result.data;
}
// 获取证件类型数据
const getCertationType = async () => {
  let result = await reqCertationType();
  certationTypeArr.value = result.data;
}
// 上传图片超出限制提示
const exceedHandler = () => {
  ElMessage({type:'warning',message:'最多上传一张图片'})

}

// 图片上传成功的回调
const successHandler = (response: any, ) => {
  authParam.certificatesUrl = response.data;
}
// 处理点击图片预览，弹出窗口
const  handlePictureCardPreview = () => {
  dialogVisible.value = true;
}
// 重置表单数据
const resetForm = () => {
  Object.assign(authParam,{
    certificatesNo:'',
    certificatesType:'',
    certificatesUrl:'',
    name:''
  })
  upload.value.clearFiles();
}
// 提交表单数据
const submit = async () => {
  await ruleFormRef.value.validate();
  try {
    await reqUserAuah(authParam)
    ElMessage({type:"success",message:'认证成功'})
    getUserInfo();
  }catch (e) {
    ElMessage({type:"error",message:'认证失败'})
  }

}

// 表单自定义校验规则
const  validateName = (rule: any, value: any, callback: any) => {
  let nameReg = /^[\u00B7\u3007\u3400-\u4DBF\u4E00-\u9FFF\uE000-\uF8FF\uD840-\uD8C0\uDC00-\uDFFF\uF900-\uFAFF]+$/; //名字
  if (nameReg.test(value)) {
    callback()
  }else {
    console.log(123);
    callback(new Error('请输入正确中国人的名字'))
  }
}
const validateType = (rule: any, value: any, callback: any) => {
  if (value === '10'|| value === '20') {
    callback()
  }else {
    callback(new Error('请选择证件的类型'))
  }
}
const validateNo = (rule: any, value: any, callback: any) => {
  let noReg18 = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;       //身份证号码
  let noReg15 = /^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$/;       //身份证号码
  if (noReg18.test(value) && noReg15.test(value)) {
    callback()
  }else {
    callback(new Error('请输入正确的身份证或者户口本的号码'))
  }
}
const validateFile = (rule: any, value: any, callback: any) => {
  if (authParam.certificatesUrl.length > 0) {
    callback()
  }else {
    callback(new Error('请上传证件照图片'))
  }
}
let rules = reactive<any>({

  name: [{ validator: validateName, trigger: 'blur',required: true }],
  type: [{ validator: validateType, trigger: 'blur',required: true }],
  no: [{ validator: validateNo, trigger: 'blur',required: true }],
  file: [{ validator: validateFile, trigger: 'blur',required: true }],

})
onMounted(() => {
  getUserInfo();
  getCertationType();
})
</script>

<style scoped lang="less">
.certified {
  .tip {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
  }
  :deep(td.el-descriptions__label,is-bordered-label){
    width: 100px;
  }

}
.notCertified {
  .tip {
    display: flex;
    justify-content: center;
  }

}

</style>